<template>
    <div class="main">
        <h1>计算属性 computed() </h1>
        <p>使用计算属性来描述依赖响应式状态的复杂逻辑</p>

        <h4>在模板中计算:</h4>
        <p>{{ author.books.length > 3 ? author.books.join('-') : author.books[0] }}</p>

        <h4>计算属性:</h4>
        <p v-for="item in 5 " :key="item">{{ comBookStr }}</p>

        <h4>自定义函数:</h4>
        <div v-for="item in 5" :key="item">{{ funcBookStr() }}</div>

        <input type="text" v-model="bookName" name="" id="">
        <button type="button" @click="addNewBook">新加一本书</button>

        <h4>计算属性默认是只读的。</h4>
        <p>当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：</p>
    </div>
</template>


<script lang="ts">
export default {
    name: 'diyDemo313'
}
</script>
<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';


const author = reactive({
    name: 'John Doe',
    books: [
        '金瓶梅',
        '活着',
        '小王子',
        '富婆爱上我',
        '广东富婆通讯录',
        '高富帅爱上我',
    ]
})

// 计算属性
// 1、缓存,计算属性函数的结果会缓存，除非计算属性相关的状态变量改变时才会重新生成结果
// 2、传入一个 getter函数，返回一个 ref
const comBookStr = computed(() => {
    console.log('计算属性被调用了，结果重新计算');

    return author.books.length > 3 ? author.books.join('-') : author.books[0]
})

const bookName = ref('')

const addNewBook = () => {
    try {
        if (!bookName.value) {
            throw new Error("输入书的名字");

        }
        author.books.push(bookName.value)
    } catch (error) {
        alert(error)
    }

}

function funcBookStr() {
    console.log('自定义函数被调用，结果重新计算');

    return author.books.length > 3 ? author.books.join('-') : author.books[0]
}


// 可写计算属性

const comBookStrW = computed({
    get: () => {
        return author.books.length > 3 ? author.books.join('-') : author.books[0]

    },
    set: (val) => {
        console.log(val);
        author.books = [...author.books, val]
    }
})

comBookStrW.value = '毛选'
comBookStrW.value = '毛概'
comBookStrW.value = '资本论'

</script>

<style lang="scss">
.main {
    padding: 10px;
}
</style>